<template>
    <div class="main-contents-box">
        <div class="main-contents-main">
            <div class="environment smoke-warp">

                <!-- 门磁模块 -->
                <door class="door" :door-items="items" v-for="items in doorList"
                      :style="{left:items.x+'px',top:items.y+'px'}"></door>

                <!-- 温度模块 -->
                <div class="temperature">
                    <ul class="warter-content">
                        <li class="waterwarp" v-for="items in waters" :style="{left:items.x+'px',top:items.y+'px'}">
                            <div class="isid" style="display:none">{{items.deviceid}}</div>
                            <temperature :tem-items="items"></temperature>
                        </li>
                        <li class="smokeWarp" v-for="item in smokeList" :style="{left:item.x+'px',top:item.y+'px'}">
                            <smoke :items="item"></smoke>
                        </li>
                        <li class="infraredWarp" v-for="items in infraredList"
                            :style="{left:items.x+'px',top:items.y+'px'}">
                            <infra :infra-items="items"></infra>
                        </li>
                    </ul>
                </div>
                <!-- 水浸模块 -->
                <div class="leach-box leach-box-header" v-for="items in wartercontetns"
                     :style="{left:items.x+'px',top:items.y+'px'}" :class="{'leach-box-active':items.water}">
                    {{items.name}}
                    <div class="isid" style="display:none">{{items.deviceid}}</div>
                </div>

                <!-- 空调模块 -->
                <airs class="air" :air-items="items" :air-index="index" :show-content="showContent"
                      v-for="(items,index) in airContent" :style="{left:items.x+'px',top:items.y+'px'}"></airs>

                <!-- plugin为721153的精密空调 -->
                <precisionAir1 class="pre-air" v-for="item in preAir" v-if="item['pluginid'] == 721153? true:false"
                               :style="{left:item.x+'px',top:item.y+'px'}" :itemsa="item"
                               :alarms="preAlarm[item.deviceid]?preAlarm[item.deviceid]:''"
                               :neab="(preAlarm[item.deviceid]?(preAlarm[item.deviceid].numbersa?preAlarm[item.deviceid].numbersa:0):'')"
                               @on-shows="showDialog">
                </precisionAir1>

                <!-- plugin为721154的精密空调 -->
                <precisionAir2 class="pre-air" v-for="item in preAir" v-if="item['pluginid'] == 721154? true:false"
                               :style="{left:item.x+'px',top:item.y+'px'}" :itemsa="item"
                               :alarms="preAlarm[item.deviceid]?preAlarm[item.deviceid]:''"
                               :neab="(preAlarm[item.deviceid]?(preAlarm[item.deviceid].numbersa?preAlarm[item.deviceid].numbersa:0):'')"
                               @on-shows="showDialog">
                </precisionAir2>

                <!-- plugin为721409的精密空调 -->
                <precisionAir3 class="pre-air" v-for="item in preAir" v-if="item['pluginid'] == 721409? true:false"
                               :style="{left:item.x+'px',top:item.y+'px'}" :itemsa="item"
                               :alarms="preAlarm[item.deviceid]?preAlarm[item.deviceid]:''"
                               :neab="(preAlarm[item.deviceid]?(preAlarm[item.deviceid].numbersa?preAlarm[item.deviceid].numbersa:0):'')"
                               @on-shows="showDialog">
                </precisionAir3>

                <div class="buttons-box">
                    <el-button type='primary' @click="edit" size="small">{{btnname}}</el-button>
                </div>

                <backdrop :is-show="isShowRegDialog1" @on-close="closeDialog('isShowRegDialog1')">
                    <preAirpop1 v-if="pop1 == true?true:false" v-loading="loading3" element-loading-text="拼命加载中"
                                element-loading-spinner="el-icon-loading"
                                element-loading-background="rgba(0, 0, 0, 0.8)"
                                :a="preAlarm11" :aa="preAlarm12" :aaa="preAlarm13" :aaaa="preAlarm14"></preAirpop1>
                    <preAirpop2 v-if="pop2 == true?true:false" v-loading="loading3" element-loading-text="拼命加载中"
                                element-loading-spinner="el-icon-loading"
                                element-loading-background="rgba(0, 0, 0, 0.8)"
                                :b="preAlarm21" :bb="preAlarm22" :bbb="preAlarm23"></preAirpop2>
                    <preAirpop3 v-if="pop3 == true?true:false" v-loading="loading3" element-loading-text="拼命加载中"
                                element-loading-spinner="el-icon-loading"
                                element-loading-background="rgba(0, 0, 0, 0.8)"
                                :c="preAlarm31" :cc="preAlarm32"></preAirpop3>
                </backdrop>

            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    import airs from "./tem/airs.vue"
    import temperature from "./tem/temperature"
    import precisionAir1 from "./tem/precisionAir1"
    import precisionAir2 from "./tem/precisionAir2"
    import precisionAir3 from "./tem/precisionAir3"

    import backdrop from "../Monitornr/tem/backdrop.vue"

    import preAirpop1 from "../Monitornr/tem/preAirpop1.vue"
    import preAirpop2 from "../Monitornr/tem/preAirpop2.vue"
    import preAirpop3 from "../Monitornr/tem/preAirpop3.vue"

    import smoke from "./tem/smoke"
    import door from "./tem/door"
    import infra from "./tem/infrared"
    import {
        get_default_preair_data,
        show_preair_float_param1,
        show_preair_boole_param1,
        show_preair_float_param2,
        show_preair_boole_param2,
        show_preair_float_param3,
        show_preair_boole_param3
    } from "../../js/public.js"

    export default {
        name: 'environment',
        components: {
            airs,
            temperature,
            precisionAir1,
            preAirpop1,
            precisionAir2,
            preAirpop2,
            precisionAir3,
            preAirpop3,
            backdrop,
            smoke,
            door,
            infra
        },
        data() {
            return {
                btnstate: false,//btn状态确定
                smokeList: [//烟感列表
                ],
                smoke_arr: [],
                loading3: true,
                infraredList: [
                ],
                doorList: [
                ],

                infrared_arr: [],
                door_arr: [],
                isShowRegDialog1: false,

                preArr1: [],//plugin为721153型号的精密空调
                preArr2: [],//plugin为721154型号的精密空调
                preArr3: [],//plugin为721409型号的精密空调

                pop1: false,//plugin为721153型号的精密空调的弹框默认为关闭
                pop2: false,//plugin为721154型号的精密空调的弹框默认为关闭
                pop3: false,//plugin为721409型号的精密空调的弹框默认为关闭

                preAir: [],//精密空调位置信息,deviceid,name,pluginid
                preAlarm: [],//精密空调的外部实时数据
                preAlarm11: [],//精密空调的第一行实时数据
                preAlarm12: [],//精密空调的第二行实时数据
                preAlarm13: [],//精密空调的第三行实时数据
                preAlarm14: [],//精密空调的第四行实时数据

                preAlarm21: [],//精密空调的第一行实时数据
                preAlarm22: [],//精密空调的第二行实时数据
                preAlarm23: [],//精密空调的第三行实时数据

                preAlarm31: [],//精密空调3的第一行实时数据
                preAlarm32: [],//精密空调3的第二行实时数据

                switch_status: 0,//标识查看弹窗的开启状态0:关闭,1:开启
                switch_deviceid: null,//标记哪个设备的查看弹框被打开
                water: true,//水浸状态 true 为告警,false 为正常
                states: false,
                watershow: false,
                options: [],
                waters: [],
                value: '1',
                btnname: '编辑',
                showContent: false,
                wartercontetns: [],
                startwart: [],
                hum_arr: [],
                water_arr: [],
                pre_arr: [],//精密空调的ddid
                airContent: []
            }
        },
        methods: {
            get_pwd() {
                let pwd;
                $.ajax({
                    url: '../cfg/password.json',
                    type: 'GET',
                    cache: false,
                    async: false,
                    dataType: 'text',
                    success: function (result) {
                        let data = eval("(" + result + ")");
                        pwd = data.password;
                    },
                    error: function (realdata) {
                    }
                })
                return pwd;
            },
            check_pwd() {
                let username = window.sessionStorage.getItem('username');
                let password = window.sessionStorage.getItem('password');
                let pwd = this.get_pwd();
                if (username == "admin") {
                    if (password != pwd) {
                        this.$message({
                            message: '密码做了更改,请重新登录!',
                            type: 'info',
                            center: true,
                            showClose: true
                        });
                        this.loginout();
                    }
                }
            },
            loginout() {
                window.sessionStorage.removeItem("username");
                window.sessionStorage.removeItem("password");
                this.set_log("用户退出");
                this.$router.push("/login");
            },
            set_log(str) {//用户操作日志
                let msg = {"cmd": "CGI_LOG_SET_OPT", "content": str};
                $.ajax({
                    url: "cgi-bin/main.cgi",
                    contentType: "application/json;charset=utf-8",
                    type: "post",
                    data: JSON.stringify(msg),
                    success: function (msg) {
                    }
                })
            },
            edit() {
                this.$data.states = !this.$data.states;
                let that = this;
                if (this.$data.states) {
                    $(".temperature .warter-content .waterwarp").draggable("enable");
                    $(".leach-box").draggable("enable");
                    $(".air").draggable("enable");
                    $(".pre-air").draggable("enable");
                    $(".temperature .warter-content .smokeWarp ").draggable("enable");
                    $(".temperature .warter-content .infraredWarp").draggable("enable");
                    $(".environment .door").draggable("enable");

                    this.$data.btnname = '保存';
                    this.$data.showContent = true;
                    this.$data.a = this.$data.wartercontetns;
                } else {
                    $(".temperature .warter-content .waterwarp ").draggable("disable");
                    $(".leach-box").draggable("disable");
                    $(".air").draggable("disable");
                    $(".temperature .warter-content .smokeWarp ").draggable("disable");
                    $(".temperature .warter-content .infraredWarp").draggable("disable");
                    $(".environment .door").draggable("disable");

                    this.$data.btnname = '编辑';
                    this.$data.showContent = false;

                    //整合拖动后的位置信息下发
                    let position_arr = new Array();
                    $.each(that.$data.waters, function (i, value) {
                        let str = {"deviceid": value.deviceid, "x": value.x, "y": value.y};
                        position_arr.push(str);
                    })

                    $.each(that.$data.wartercontetns, function (i, value) {
                        let str = {"deviceid": value.deviceid, "x": value.x, "y": value.y};
                        position_arr.push(str);
                    })

                    $.each(that.$data.airContent, function (i, value) {
                        let str = {"deviceid": value.deviceid, "x": value.x, "y": value.y};
                        position_arr.push(str);
                    })

                    $.each(that.$data.preAir, function (i, value) {
                        let str = {"deviceid": value.deviceid, "x": value.x, "y": value.y};
                        position_arr.push(str);
                    })

                    $.each(that.$data.smokeList, function (i, value) {
                        let str = {"deviceid": value.deviceid, "x": value.x, "y": value.y};
                        position_arr.push(str);
                    })


                    $.each(that.$data.infraredList, function (i, value) {//红外位置
                        let str = {"deviceid": value.deviceid, "x": value.x, "y": value.y};
                        position_arr.push(str);
                    })

                    $.each(that.$data.doorList, function (i, value) {//门磁位置
                        let str = {"deviceid": value.deviceid, "x": value.x, "y": value.y};
                        position_arr.push(str);
                    })

                    let msg = {"cmd": "CGI_MONITOR_SET_POS", "device": position_arr};
                    $.ajax({
                        url: "cgi-bin/main.cgi",
                        contentType: "application/json;charset=utf-8",
                        type: "post",
                        data: JSON.stringify(msg),
                        success: function (msg) {
                            let data = eval("(" + msg + ")");
                            if (data.response == true) {
                                that.$message({
                                    message: '传感器位置设置成功!',
                                    type: 'success',
                                    center: true,
                                    showClose: true
                                });
                            } else {
                                that.$message({
                                    message: data.errlog,
                                    type: 'error',
                                    center: true,
                                    showClose: true
                                });
                            }
                        }
                    })
                }
            },
            showDialog(data) {
                let that = this;
                this.$data.switch_status = 1;
                this.$data.switch_deviceid = data.deviceid;
                that.$data.isShowRegDialog1 = true;
                if (data.pluginid == 721153) {
                    this.$data.pop1 = true;
                } else if (data.pluginid == 721154) {
                    this.$data.pop2 = true;
                } else if (data.pluginid == 721409) {
                    this.$data.pop3 = true;
                }
            },
            fresh_data(pluginid, data) {//根据插件ID,分类处理数据
                if (pluginid == 721154) {
                    //定义弹框中的三个数组,每5个数据为一组
                    let arr21 = new Array();
                    let arr22 = new Array();
                    let arr23 = new Array();
                    //获取该型号的boole数据
                    let boole_arr2 = show_preair_boole_param2();
                    $.each(boole_arr2, function (i, val) {
                        if (i <= 4) {
                            arr21.push(data[val]);
                        } else if (i > 4 && i <= 9) {
                            arr22.push(data[val]);
                        } else if (i > 9) {
                            arr23.push(data[val]);
                        }
                    })

                    this.$data.preAlarm21 = arr21;
                    this.$data.preAlarm22 = arr22;
                    this.$data.preAlarm23 = arr23;
                    if (this.$data.preAlarm21.length > 0) {
                        this.$data.loading3 = false;
                    } else {
                        this.$data.loading3 = true;
                    }
                }

                if (pluginid == 721153) {
                    //定义弹框中的三个数组,每5个数据为一组
                    let arr11 = new Array();
                    let arr12 = new Array();
                    let arr13 = new Array();
                    let arr14 = new Array();
                    //获取该型号的boole数据
                    let boole_arr1 = show_preair_boole_param1();
                    $.each(boole_arr1, function (i, val) {
                        if (i <= 6) {
                            arr11.push(data[val]);
                        } else if (i > 6 && i <= 13) {
                            arr12.push(data[val]);
                        } else if (i > 13 && i <= 20) {
                            arr13.push(data[val]);
                        } else if (i > 20) {
                            arr14.push(data[val]);
                        }
                    })

                    this.$data.preAlarm11 = arr11;
                    this.$data.preAlarm12 = arr12;
                    this.$data.preAlarm13 = arr13;
                    this.$data.preAlarm14 = arr14;

                    if (this.$data.preAlarm11.length > 0) {
                        this.$data.loading3 = false;
                    } else {
                        this.$data.loading3 = true;
                    }
                }

                if (pluginid == 721409) {
                    //定义弹框中的三个数组,每5个数据为一组
                    let arr31 = new Array();
                    let arr32 = new Array();

                    //获取该型号的boole数据
                    let boole_arr1 = show_preair_boole_param3();
                    $.each(boole_arr1, function (i, val) {
                        if (i <= 5) {
                            arr31.push(data[val]);
                        } else if (i > 5 && i <= 10) {
                            arr32.push(data[val]);
                        }
                    })

                    this.$data.preAlarm31 = arr31;
                    this.$data.preAlarm32 = arr32;

                    if (this.$data.preAlarm31.length > 0) {
                        this.$data.loading3 = false;
                    } else {
                        this.$data.loading3 = true;
                    }
                }
            },
            closeDialog() {
                this.$data.isShowRegDialog1 = false;
                //需要重置弹框的属性值
                this.$data.pop1 = false;
                this.$data.pop2 = false;
                this.$data.pop3 = false;
                this.$data.switch_status = 0;
                this.$data.switch_deviceid = null;
                this.$data.loading3 = true;

                this.$data.preAlarm11 = [];
                this.$data.preAlarm12 = [];
                this.$data.preAlarm13 = [];
                this.$data.preAlarm14 = [];

                this.$data.preAlarm21 = [];
                this.$data.preAlarm22 = [];
                this.$data.preAlarm23 = [];

                this.$data.preAlarm31 = [];
                this.$data.preAlarm32 = [];
            },
            moves() {
                let that = this;
                let lefts = '';
                let tops = '';
                //温湿度拖动
                $(".temperature .warter-content .waterwarp ").draggable({
                    containment: "parent",
                    stop: function () {
                        //停止拖动后获取当前位置、、使用ajax储存位置信息
                        lefts = parseInt($(this).css("left"));
                        tops = parseInt($(this).css("top"));
                        let isid = $(this).children('.isid').text()
                        $.each(that.$data.waters, function (i, value) {
                            if (value.deviceid == isid) {
                                value.x = lefts;
                                value.y = tops;
                            }
                        })
                    }
                });
                $(".temperature .warter-content .waterwarp ").draggable("disable");
                //水浸拖动
                $(".leach-box").draggable({
                    containment: "parent",
                    stop: function () {
                        //停止拖动后获取当前位置、、使用ajax储存位置信息;
                        lefts = parseInt($(this).css("left"));
                        tops = parseInt($(this).css("top"));
                        let isid = $(this).children('.isid').text();
                        $.each(that.$data.wartercontetns, function (i, value) {
                            if (value.deviceid == isid) {
                                value.x = lefts;
                                value.y = tops;
                            }
                        })
                    }
                });
                $(".leach-box").draggable("disable");

                //空调拖动
                $(".air").draggable({
                    containment: "parent",
                    stop: function () {
                        //停止拖动后获取当前位置、、使用ajax储存位置信息;
                        lefts = parseInt($(this).css("left"));
                        tops = parseInt($(this).css("top"));
                        let isid = $(this).children('.isid').text();
                        $.each(that.$data.airContent, function (i, value) {
                            if (value.deviceid == isid) {
                                value.x = lefts;
                                value.y = tops;
                            }
                        })
                    }
                });
                $(".air").draggable("disable");

                //精密空调拖动
                $(".pre-air").draggable({
                    containment: "parent",
                    stop: function () {
                        lefts = parseInt($(this).css("left"));
                        tops = parseInt($(this).css("top"));
                        let preid = $(this).children('.predid').text();

                        $.each(that.$data.preAir, function (i, value) {
                            if (value.deviceid == preid) {
                                value.x = lefts;
                                value.y = tops;
                            }
                        })
                    }
                });
                $(".pre-air").draggable("disable");

                //烟感
                $(".temperature .warter-content .smokeWarp ").draggable({
                    containment: "parent",
                    stop: function () {
                        let lefts, tops, deviceid;
                        lefts = parseInt($(this).css("left"));
                        tops = parseInt($(this).css("top"));
                        deviceid = $(this).find(".isid").text();
                        $.each(that.$data.smokeList, function (i, value) {
                            if (value.deviceid == deviceid) {
                                value.x = lefts;
                                value.y = tops;
                            }
                        })
                    }
                });
                $(".temperature .warter-content .smokeWarp ").draggable("disable");

                //红外拖动
                $(".temperature .warter-content .infraredWarp").draggable({
                    containment: "parent",
                    stop: function () {
                        let lefts, tops, infraredid;
                        lefts = parseInt($(this).css("left"));
                        tops = parseInt($(this).css("top"));
                        infraredid = $(this).find(".infraredid").text();
                        $.each(that.$data.infraredList, function (i, value) {
                            if (value.deviceid == infraredid) {
                                value.x = lefts;
                                value.y = tops;
                            }
                        })
                    }
                })
                $(".temperature .warter-content .infraredWarp").draggable("disable");


                //门磁拖动
                $(".environment .door").draggable({
                    containment: "parent",
                    stop: function () {
                        let lefts, tops, doorid;
                        lefts = parseInt($(this).css("left"));
                        tops = parseInt($(this).css("top"));
                        doorid = $(this).find(".doorid").text();

                        $.each(that.$data.doorList, function (i, value) {
                            if (value.deviceid == doorid) {
                                value.x = lefts;
                                value.y = tops;
                            }
                        })
                    }
                })

                $(".environment .door").draggable("disable");
            },
            get_info() {//获取传感器个数和相应位置
                let that = this;
                let get_env_msg = {
                    "cmd": "CGI_MONITOR_GET_ENV",
                    "sensorlist": [1, 3, 4, 7, 8, 10, 11]
                };
                if (window.sessionStorage.getItem('username') == "zyl") {
                    $.ajax({
                        url: "../static/get_env.json",
                        contentType: "application/json;charset=utf-8",
                        type: "get",
                        dataType: 'text',
                        cache: false,
                        async: false,
                        success: function (msg) {
                            let res = eval("(" + msg + ")");
                            //判断是否存在某类传感器，需要判断数据是不是存在
                            if (res["1"] == undefined) {//判断温湿度传感器是否存在
                                that.$data.waters = [];
                            } else {
                                let hum_arr = new Array();
                                $.each(res['1'], function (n, value) {
                                    hum_arr.push(value.deviceid);
                                })
                                //将包含温湿度的deviceid数组赋值到hum_arr中，以便实时显示数据使用
                                that.$data.hum_arr = hum_arr;
                                let real_msg = {"devicelist": hum_arr};
                                $.ajax({
                                    url: '../static/get_env_humdata.json',
                                    type: 'GET',
                                    cache: false,
                                    async: false,
                                    dataType: 'text',
                                    success: function (result) {
                                        let data = eval("(" + result + ")");
                                        $.each(res['1'], function (i, value) {
                                            if (typeof (data[value.deviceid]["65537"]) == "number") {
                                                value["65537"] = data[value.deviceid]["65537"].toFixed(2);
                                            } else {
                                                value["65537"] = "error";
                                            }

                                            if (typeof (data[value.deviceid]["65538"]) == "number") {
                                                value["65538"] = data[value.deviceid]["65538"].toFixed(2);
                                            } else {
                                                value["65538"] = "error";
                                            }
                                            res["1"][i] = value;
                                        })
                                        that.$data.waters = res["1"];
                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }


                            //判断红外是否存在
                            if (res["3"] == undefined) {
                                that.$data.infraredList = [];
                            } else {
                                let infrared_arr = new Array();
                                //that.$data.waters = res["1"];
                                $.each(res['3'], function (n, value) {
                                    infrared_arr.push(value.deviceid);
                                })
                                //将包含红外的deviceid数组赋值到什么infrared_arr中，以便实时显示数据使用
                                that.$data.infrared_arr = infrared_arr;
                                let real_msg = {"cmd": "CGI_MONITOR_GET_ENV_REALDATA", "devicelist": infrared_arr};

                                $.ajax({
                                    url: '../static/get_env_safedata.json',
                                    type: 'GET',
                                    cache: false,
                                    async: false,
                                    dataType: 'text',
                                    success: function (result) {
                                        let realdata = eval("(" + result + ")");

                                        $.each(res["3"], function (i, value) {
                                            if (JSON.stringify(realdata[value.deviceid]) == "{}") {
                                                value["isActive"] = false;
                                                value["isnull"] = true;
                                                //value["brief"] = "采集超时";
                                            } else {
                                                if (realdata[value.deviceid]["196609"] == 1) {//告警
                                                    value["isActive"] = true;
                                                    //console.log("OK");
                                                } else {//不告警
                                                    value["isActive"] = false;
                                                    //console.log("ERROR");
                                                }
                                                value["isnull"] = false;
                                                //value["brief"] = "";
                                            }
                                            res["3"][i] = value;
                                        })
                                        that.$data.infraredList = res["3"];
                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }


                            if (res["7"] == undefined) {
                                that.$data.doorList = [];
                            } else {
                                let door_arr = new Array();
                                //that.$data.waters = res["1"];
                                $.each(res['7'], function (n, value) {
                                    door_arr.push(value.deviceid);
                                })
                                //将包含红外的deviceid数组赋值到什么infrared_arr中，以便实时显示数据使用
                                that.$data.door_arr = door_arr;
                                let real_msg = {"cmd": "CGI_MONITOR_GET_ENV_REALDATA", "devicelist": door_arr};

                                $.ajax({
                                    url: '../static/get_env_safedata.json',
                                    type: 'GET',
                                    cache: false,
                                    async: false,
                                    dataType: 'text',
                                    success: function (result) {
                                        let realdata = eval("(" + result + ")");
                                        $.each(res["7"], function (i, value) {
                                            if (JSON.stringify(realdata[value.deviceid]) == "{}") {
                                                value["isActive"] = false;
                                                value["isnull"] = true;
                                                //value["brief"] = "采集超时";
                                            } else {
                                                if (realdata[value.deviceid]["458753"] == 1) {//告警
                                                    value["isActive"] = true;
                                                    //console.log("OK");
                                                } else {//不告警
                                                    value["isActive"] = false;
                                                    //console.log("ERROR");
                                                }
                                                value["isnull"] = false;
                                                //value["brief"] = "";
                                            }
                                            res["7"][i] = value;
                                        })
                                        that.$data.doorList = res["7"];
                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }

                            if (res["4"] == undefined) {//判断烟感是否存在
                                that.$data.smokeList = [];
                            } else {
                                let smoke_arr = new Array();
                                //that.$data.waters = res["1"];
                                $.each(res['4'], function (n, value) {
                                    smoke_arr.push(value.deviceid);
                                })

                                //将包含烟感的deviceid数组赋值到什么smoke_arr中，以便实时显示数据使用
                                that.$data.smoke_arr = smoke_arr;
                                let real_msg = {"devicelist": smoke_arr};

                                $.ajax({
                                    url: '../static/get_env_smokedata.json',
                                    type: 'GET',
                                    cache: false,
                                    async: false,
                                    dataType: 'text',
                                    success: function (result) {
                                        let realdata = eval("(" + result + ")");
                                        $.each(res["4"], function (i, value) {
                                            if (JSON.stringify(realdata[value.deviceid]) == "{}") {
                                                value["isActive"] = false;
                                                value["isnull"] = true;
                                                value["brief"] = "采集超时";
                                            } else {
                                                if (realdata[value.deviceid]["262145"] == 1) {//告警
                                                    value["isActive"] = true;
                                                } else {//不告警
                                                    value["isActive"] = false;
                                                }
                                                value["isnull"] = false;
                                                value["brief"] = "";
                                            }
                                            res["4"][i] = value;
                                        })
                                        that.$data.smokeList = res["4"];
                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }

                            //判断水浸是否存在
                            if (res["8"] == undefined) {
                                that.$data.wartercontetns = [];
                                that.$data.watershow = false;//水绳是否显示
                            } else {
                                //that.$data.watershow = true;//水绳是否显示

                                let water_arr = new Array();
                                let water_option = new Array();
                                $.each(res['8'], function (n, value) {
                                    let str = {"deviceid": value.deviceid, "name": value.name};
                                    water_option.push(str);
                                    water_arr.push(value.deviceid);
                                })

                                //给水浸下的列表赋值
                                that.$data.options = water_option;
                                //将包含温湿度的deviceid数组赋值到water_arr中，以便实时显示数据使用
                                that.$data.water_arr = water_arr;
                                let real_msg = {"devicelist": water_arr};

                                $.ajax({
                                    url: '../static/get_env_waterdata.json',
                                    type: 'GET',
                                    cache: false,
                                    async: false,
                                    dataType: 'text',
                                    success: function (result) {
                                        let realdata = eval("(" + result + ")");
                                        $.each(res["8"], function (i, value) {
                                            if (realdata[value.deviceid]["524289"] == undefined) {
                                                value["water"] = true;
                                            } else {
                                                if (realdata[value.deviceid]["524289"] == true) {//告警
                                                    value["water"] = true;
                                                } else {//不告警
                                                    value["water"] = false;
                                                }
                                            }
                                            res["8"][i] = value;

                                        })

                                        that.$data.wartercontetns = res["8"];


                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }

                            //判断空调模块是否存在
                            if (res["10"] == undefined) {
                                that.$data.airContent = [];
                            } else {
                                $.each(res['10'], function (n, value) {
                                    value["status"] = "";
                                    value["colddata"] = "";
                                    value["dehumidifydata"] = "";
                                    res["10"][n] = value;
                                })
                                that.$data.airContent = res["10"];
                            }


                            //判断精密空调传感器是否存在
                            if (res["11"] == undefined) {
                                that.$data.preAir = [];
                            } else {
                                that.$data.preAir = res["11"];
                                let pre_arr = new Array();//集合
                                let pre_arr1 = new Array();//pluginid 为 721153
                                let pre_arr2 = new Array();//pluginid 为 721154
                                let pre_arr3 = new Array();//pluginid 为 721409

                                $.each(res['11'], function (n, value) {
                                    pre_arr.push(value.deviceid);
                                    if (value.pluginid == 721153) {
                                        pre_arr1.push(value.deviceid);
                                    } else if (value.pluginid == 721154) {
                                        pre_arr2.push(value.deviceid);
                                    } else if (value.pluginid == 721409) {
                                        pre_arr3.push(value.deviceid);
                                    }
                                })

                                //将分类的数组赋予变量中,用于实时刷新数据中使用
                                that.$data.preArr1 = pre_arr1;
                                that.$data.preArr2 = pre_arr2;
                                that.$data.preArr3 = pre_arr3;

                                //将包含温湿度的deviceid数组赋值到hum_arr中，以便实时显示数据使用
                                that.$data.pre_arr = pre_arr;
                                let real_msg = {"devicelist": pre_arr};
                                $.ajax({
                                    url: '../static/get_env_preair.json',
                                    type: 'GET',
                                    cache: false,
                                    async: false,
                                    dataType: 'text',
                                    success: function (result) {
                                        let data = eval("(" + result + ")");

                                        let ii = 0;//用于告警数的计数
                                        $.each(data, function (i, value) {//i:deviceid,value:数据组
                                            //数组为空/数组中不含有该值，则返回 -1
                                            var index1 = $.inArray(parseInt(i), pre_arr1);
                                            var index2 = $.inArray(parseInt(i), pre_arr2);
                                            var index3 = $.inArray(parseInt(i), pre_arr3);

                                            if (index1 >= 0) {//属于插件pluginid为721153的传感器
                                                let float_arr1 = show_preair_float_param1();
                                                let boole_arr1 = show_preair_boole_param1();

                                                $.each(float_arr1, function (n, val) {//n:key,val:元素属性
                                                    if (typeof (value[val]) == "number") {
                                                        if (val == 720901) {//空调运行模式
                                                            let mode = "";
                                                            if (value["720901"] == 0) {
                                                                mode = "单机";
                                                            } else if (value["720901"] == 1) {
                                                                mode = "群控0";
                                                            } else if (value["720901"] == 2) {
                                                                mode = "群控1";
                                                            } else if (value["720901"] == 3) {
                                                                mode = "群控2";
                                                            } else if (value["720901"] == 4) {
                                                                mode = "群控3";
                                                            }
                                                            data[i]["720901"] = mode;
                                                        } else {
                                                            data[i][val] = value[val].toFixed(2);
                                                        }
                                                    } else {
                                                        data[i][val] = "error";
                                                    }
                                                })

                                                $.each(boole_arr1, function (n, val) {//n:key,val:元素属性
                                                    if (value[val] == true) {
                                                        ii++;
                                                    }
                                                })
                                                data[i]["numbersa"] = ii;
                                            } else if (index2 >= 0) {//属于插件pluginid为721154的传感器
                                                let float_arr2 = show_preair_float_param2();
                                                let boole_arr2 = show_preair_boole_param2();

                                                $.each(float_arr2, function (n, val) {//n:key,val:元素属性
                                                    if (typeof (value[val]) == "number") {
                                                        data[i][val] = value[val].toFixed(2);
                                                    } else {
                                                        data[i][val] = "error";
                                                    }
                                                })

                                                $.each(boole_arr2, function (n, val) {//n:key,val:元素属性
                                                    if (value[val] == true) {
                                                        ii++;
                                                    }
                                                })
                                                data[i]["numbersa"] = ii;
                                            } else if (index3 >= 0) {//属于插件pluginid为721154的传感器
                                                let float_arr3 = show_preair_float_param3();
                                                let boole_arr3 = show_preair_boole_param3();

                                                $.each(float_arr3, function (n, val) {//n:key,val:元素属性
                                                    if (typeof (value[val]) == "number") {
                                                        data[i][val] = value[val].toFixed(2);
                                                    } else {
                                                        data[i][val] = "error";
                                                    }
                                                })

                                                $.each(boole_arr3, function (n, val) {//n:key,val:元素属性
                                                    if (value[val] == true) {
                                                        ii++;
                                                    }
                                                })
                                                data[i]["numbersa"] = ii;
                                            }
                                        })
                                        that.$data.preAlarm = data;
                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                        }
                    });
                } else {
                    $.ajax({
                        url: "cgi-bin/main.cgi",
                        contentType: "application/json;charset=utf-8",
                        type: "post",
                        cache: false,
                        async: false,
                        data: JSON.stringify(get_env_msg),
                        success: function (msg) {
                            let res = eval("(" + msg + ")");
                            //判断是否存在某类传感器，需要判断数据是不是存在
                            if (res["1"] == undefined) {//判断温湿度传感器是否存在
                                that.$data.waters = [];
                            } else {
                                let hum_arr = new Array();
                                $.each(res['1'], function (n, value) {
                                    hum_arr.push(value.deviceid);
                                });
                                //将包含温湿度的deviceid数组赋值到hum_arr中，以便实时显示数据使用
                                that.$data.hum_arr = hum_arr;
                                let real_msg = {"devicelist": hum_arr};
                                $.ajax({
                                    url: 'cgi-bin/JHMonitoring.cgi',
                                    type: 'post',
                                    cache: false,
                                    async: false,
                                    data: JSON.stringify(real_msg),
                                    success: function (result) {
                                        let data = eval("(" + result + ")");
                                        $.each(res['1'], function (i, value) {
                                            if (typeof (data[value.deviceid]["65537"]) == "number") {
                                                value["65537"] = data[value.deviceid]["65537"].toFixed(2);
                                            } else {
                                                value["65537"] = "error";
                                            }

                                            if (typeof (data[value.deviceid]["65538"]) == "number") {
                                                value["65538"] = data[value.deviceid]["65538"].toFixed(2);
                                            } else {
                                                value["65538"] = "error";
                                            }
                                            res["1"][i] = value;
                                        })
                                        that.$data.waters = res["1"];
                                    },
                                    error: function (realdata) {
                                    }
                                });
                            }

                            //判断红外是否存在
                            if (res["3"] == undefined) {
                                that.$data.infraredList = [];
                            } else {
                                let infrared_arr = new Array();
                                $.each(res['3'], function (n, value) {
                                    infrared_arr.push(value.deviceid);
                                });
                                //将包含红外的deviceid数组赋值到什么infrared_arr中，以便实时显示数据使用
                                that.$data.infrared_arr = infrared_arr;
                                let real_msg = {"devicelist": infrared_arr};
                                $.ajax({
                                    url: 'cgi-bin/JHMonitoring.cgi',
                                    type: 'post',
                                    cache: false,
                                    async: false,
                                    data: JSON.stringify(real_msg),
                                    success: function (result) {
                                        let realdata = eval("(" + result + ")");
                                        $.each(res["3"], function (i, value) {
                                            if (JSON.stringify(realdata[value.deviceid]) == "{}") {
                                                value["isActive"] = false;
                                                value["isnull"] = true;
                                                //value["brief"] = "采集超时";
                                            } else {
                                                if (realdata[value.deviceid]["196609"] == 1) {//告警
                                                    value["isActive"] = true;
                                                    //console.log("OK");
                                                } else {//不告警
                                                    value["isActive"] = false;
                                                    //console.log("ERROR");
                                                }
                                                value["isnull"] = false;
                                                //value["brief"] = "";
                                            }
                                            res["3"][i] = value;
                                        })
                                        that.$data.infraredList = res["3"];
                                    },
                                    error: function (realdata) {
                                    }
                                });
                            }


                            //门磁解析
                            if (res["7"] == undefined) {//判断门磁是否存在
                                that.$data.doorList = [];
                            } else {
                                let door_arr = new Array();
                                //that.$data.waters = res["1"];
                                $.each(res['7'], function (n, value) {
                                    door_arr.push(value.deviceid);
                                });
                                //将包含红外的deviceid数组赋值到什么infrared_arr中，以便实时显示数据使用
                                that.$data.door_arr = door_arr;
                                let real_msg = {"devicelist": door_arr};

                                $.ajax({
                                    url: 'cgi-bin/JHMonitoring.cgi',
                                    type: 'post',
                                    cache: false,
                                    async: false,
                                    data: JSON.stringify(real_msg),
                                    success: function (result) {
                                        let realdata = eval("(" + result + ")");
                                        $.each(res["7"], function (i, value) {
                                            if (JSON.stringify(realdata[value.deviceid]) == "{}") {
                                                value["isActive"] = false;
                                                value["isnull"] = true;
                                                //value["brief"] = "采集超时";
                                            } else {
                                                if (realdata[value.deviceid]["458753"] == 1) {//告警
                                                    value["isActive"] = true;
                                                    //console.log("OK");
                                                } else {//不告警
                                                    value["isActive"] = false;
                                                    //console.log("ERROR");
                                                }
                                                value["isnull"] = false;
                                                //value["brief"] = "";
                                            }
                                            res["7"][i] = value;
                                        })
                                        that.$data.doorList = res["7"];
                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }


                            if (res["4"] == undefined) {//判断烟感是否存在
                                that.$data.smokeList = [];
                            } else {
                                let smoke_arr = new Array();
                                //that.$data.waters = res["1"];
                                $.each(res['4'], function (n, value) {
                                    smoke_arr.push(value.deviceid);
                                });

                                //将包含烟感的deviceid数组赋值到什么smoke_arr中，以便实时显示数据使用
                                that.$data.smoke_arr = smoke_arr;
                                let real_msg = {"devicelist": smoke_arr};

                                $.ajax({
                                    url: 'cgi-bin/JHMonitoring.cgi',
                                    type: 'post',
                                    cache: false,
                                    async: false,
                                    data: JSON.stringify(real_msg),
                                    success: function (result) {
                                        let realdata = eval("(" + result + ")");
                                        $.each(res["4"], function (i, value) {
                                            if (JSON.stringify(realdata[value.deviceid]) == "{}") {
                                                value["isActive"] = false;
                                                value["isnull"] = true;
                                                value["brief"] = "采集超时";
                                            } else {
                                                if (realdata[value.deviceid]["262145"] == 1) {//告警
                                                    value["isActive"] = true;
                                                } else {//不告警
                                                    value["isActive"] = false;
                                                }
                                                value["isnull"] = false;
                                                value["brief"] = "";
                                            }
                                            res["4"][i] = value;
                                        });
                                        that.$data.smokeList = res["4"];
                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }

                            //判断水浸是否存在
                            if (res["8"] == undefined) {
                                that.$data.wartercontetns = [];
                                that.$data.watershow = false;//水绳是否显示
                            } else {
                                that.$data.watershow = true;//水绳是否显示
                                //that.$data.wartercontetns = res["8"];
                                let water_arr = new Array();
                                let water_option = new Array();
                                $.each(res['8'], function (n, value) {
                                    let str = {"deviceid": value.deviceid, "name": value.name};
                                    water_option.push(str);
                                    water_arr.push(value.deviceid);
                                });

                                //给水浸下的列表赋值
                                that.$data.options = water_option;
                                //将包含温湿度的deviceid数组赋值到water_arr中，以便实时显示数据使用
                                that.$data.water_arr = water_arr;
                                let real_msg = {"devicelist": water_arr};

                                $.ajax({
                                    url: 'cgi-bin/JHMonitoring.cgi',
                                    type: 'post',
                                    cache: false,
                                    async: false,
                                    data: JSON.stringify(real_msg),
                                    success: function (result) {
                                        let realdata = eval("(" + result + ")");

                                        $.each(res["8"], function (i, value) {
                                            if (realdata[value.deviceid]["524289"] === undefined) {
                                                value["water"] = true;
                                            } else {
                                                if (realdata[value.deviceid]["524289"] == true) {//告警
                                                    value["water"] = true;
                                                } else {//不告警
                                                    value["water"] = false;
                                                }
                                            }
                                            res["8"][i] = value;
                                        });

                                        that.$data.wartercontetns = res["8"];
                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }
                            //判断是否存在某类传感器，需要判断数据是不是存在
                            if (res["10"] == undefined) {//判断空调模块是否存在
                                that.$data.airContent = [];
                            } else {
                                $.each(res['10'], function (n, value) {
                                    value["status"] = "";
                                    value["colddata"] = "";
                                    value["dehumidifydata"] = "";
                                    res["10"][n] = value;
                                });
                                that.$data.airContent = res["10"];
                            }

                            if (res["11"] == undefined) {//判断精密空调传感器是否存在
                                that.$data.preAir = [];
                            } else {
                                that.$data.preAir = res["11"];
                                let pre_arr = new Array();//集合
                                let pre_arr1 = new Array();//pluginid 为 721153
                                let pre_arr2 = new Array();//pluginid 为 721154
                                let pre_arr3 = new Array();//pluginid 为 721409

                                $.each(res['11'], function (n, value) {
                                    pre_arr.push(value.deviceid);
                                    if (value.pluginid == 721153) {
                                        pre_arr1.push(value.deviceid);
                                    } else if (value.pluginid == 721154) {
                                        pre_arr2.push(value.deviceid);
                                    } else if (value.pluginid == 721409) {
                                        pre_arr3.push(value.deviceid);
                                    }
                                });

                                //将分类的数组赋予变量中,用于实时刷新数据中使用
                                that.$data.preArr1 = pre_arr1;
                                that.$data.preArr2 = pre_arr2;
                                that.$data.preArr3 = pre_arr3;

                                //将包含温湿度的deviceid数组赋值到hum_arr中，以便实时显示数据使用
                                that.$data.pre_arr = pre_arr;
                                let real_msg = {"devicelist": pre_arr};
                                $.ajax({
                                    url: 'cgi-bin/JHMonitoring.cgi',
                                    type: 'post',
                                    cache: false,
                                    async: false,
                                    data: JSON.stringify(real_msg),
                                    success: function (result) {
                                        let data = eval("(" + result + ")");

                                        let ii = 0;//用于告警数的计数
                                        $.each(data, function (i, value) {//i:deviceid,value:数据组
                                            //数组为空/数组中不含有该值，则返回 -1
                                            var index1 = $.inArray(parseInt(i), pre_arr1);
                                            var index2 = $.inArray(parseInt(i), pre_arr2);
                                            var index3 = $.inArray(parseInt(i), pre_arr3);

                                            if (index1 >= 0) {//属于插件pluginid为721153的传感器
                                                let float_arr1 = show_preair_float_param1();
                                                let boole_arr1 = show_preair_boole_param1();

                                                $.each(float_arr1, function (n, val) {//n:key,val:元素属性
                                                    if (typeof (value[val]) == "number") {
                                                        if (val == 720901) {//空调运行模式
                                                            let mode = "";
                                                            if (value["720901"] == 0) {
                                                                mode = "单机";
                                                            } else if (value["720901"] == 1) {
                                                                mode = "群控0";
                                                            } else if (value["720901"] == 2) {
                                                                mode = "群控1";
                                                            } else if (value["720901"] == 3) {
                                                                mode = "群控2";
                                                            } else if (value["720901"] == 4) {
                                                                mode = "群控3";
                                                            }
                                                            data[i]["720901"] = mode;
                                                        } else {
                                                            data[i][val] = value[val].toFixed(2);
                                                        }
                                                    } else {
                                                        data[i][val] = "error";
                                                    }
                                                });

                                                $.each(boole_arr1, function (n, val) {//n:key,val:元素属性
                                                    if (value[val] == true) {
                                                        ii++;
                                                    }
                                                });
                                                data[i]["numbersa"] = ii;
                                            } else if (index2 >= 0) {//属于插件pluginid为721154的传感器
                                                let float_arr2 = show_preair_float_param2();
                                                let boole_arr2 = show_preair_boole_param2();

                                                $.each(float_arr2, function (n, val) {//n:key,val:元素属性
                                                    if (typeof (value[val]) == "number") {
                                                        data[i][val] = value[val].toFixed(2);
                                                    } else {
                                                        data[i][val] = "error";
                                                    }
                                                });

                                                $.each(boole_arr2, function (n, val) {//n:key,val:元素属性
                                                    if (value[val] == true) {
                                                        ii++;
                                                    }
                                                });
                                                data[i]["numbersa"] = ii;
                                            } else if (index3 >= 0) {//属于插件pluginid为721154的传感器
                                                let float_arr3 = show_preair_float_param3();
                                                let boole_arr3 = show_preair_boole_param3();

                                                $.each(float_arr3, function (n, val) {//n:key,val:元素属性
                                                    if (typeof (value[val]) == "number") {
                                                        data[i][val] = value[val].toFixed(2);
                                                    } else {
                                                        data[i][val] = "error";
                                                    }
                                                });

                                                $.each(boole_arr3, function (n, val) {//n:key,val:元素属性
                                                    if (value[val] == true) {
                                                        ii++;
                                                    }
                                                });
                                                data[i]["numbersa"] = ii;
                                            }
                                        });
                                        that.$data.preAlarm = data;
                                    },
                                    error: function (realdata) {
                                    }
                                })
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                        }
                    });
                }
            },
            get_hum_info() {//获取温湿度的实时数据
                let that = this;
                let ii = 0;//用于温湿度传感器的计数赋值
                let real_msg = {"devicelist": this.$data.hum_arr};
                if (window.sessionStorage.getItem('username') == "zyl") {
                    $.ajax({
                        url: '../static/get_env_realdata.json',
                        type: 'GET',
                        cache: false,
                        async: false,
                        dataType: "text",
                        success: function (result) {
                            let data = eval("(" + result + ")");
                            $.each(data, function (i, value) {
                                if (typeof (value["65537"]) == "number") {
                                    that.$data.waters[ii]["65537"] = value["65537"].toFixed(2);
                                } else {
                                    that.$data.waters[ii]["65537"] = "error";
                                }

                                if (typeof (value["65538"]) == "number") {
                                    that.$data.waters[ii]["65538"] = value["65538"].toFixed(2);
                                } else {
                                    that.$data.waters[ii]["65538"] = "error";
                                }
                                ii++;
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                } else {
                    $.ajax({
                        url: 'cgi-bin/JHMonitoring.cgi',
                        type: 'post',
                        cache: false,
                        async: false,
                        data: JSON.stringify(real_msg),
                        success: function (result) {
                            let data = eval("(" + result + ")");
                            $.each(data, function (i, value) {
                                if (typeof (value["65537"]) == "number") {
                                    that.$data.waters[ii]["65537"] = value["65537"].toFixed(2);
                                } else {
                                    that.$data.waters[ii]["65537"] = "error";
                                }

                                if (typeof (value["65538"]) == "number") {
                                    that.$data.waters[ii]["65538"] = value["65538"].toFixed(2);
                                } else {
                                    that.$data.waters[ii]["65538"] = "error";
                                }
                                ii++;
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                }
                ii = 0;
            },
            get_water_info() {//获取水浸的实时数据
                let that = this;
                let ii = 0;
                that.$data.watershow = true;//水绳是否显示
                let real_msg = {"devicelist": this.$data.water_arr};
                if (window.sessionStorage.getItem('username') == "zyl") {
                    $.ajax({
                        url: '../static/get_env_realwatertest.json',
                        type: 'GET',
                        cache: false,
                        async: false,
                        dataType: 'text',
                        success: function (result) {
                            let realdata = eval("(" + result + ")");
                            $.each(realdata, function (i, value) {

                                if (value["524288"] == true) {
                                    that.$data.wartercontetns[ii].water = true;
                                } else {
                                    if (value["524289"] == true) {//告警
                                        that.$data.wartercontetns[ii].water = true;
                                    } else {//不告警
                                        that.$data.wartercontetns[ii].water = false;
                                    }
                                }
                                ii++;
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                } else {
                    $.ajax({
                        url: 'cgi-bin/JHMonitoring.cgi',
                        type: 'post',
                        cache: false,
                        async: false,
                        data: JSON.stringify(real_msg),
                        success: function (result) {
                            let realdata = eval("(" + result + ")");
                            $.each(realdata, function (i, value) {
                                if (value["524288"] == true) {
                                    that.$data.wartercontetns[ii].water = true;
                                } else {
                                    if (value["524289"] == true) {//告警
                                        that.$data.wartercontetns[ii].water = true;
                                    } else {//不告警
                                        that.$data.wartercontetns[ii].water = false;
                                    }
                                }
                                ii++;
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                }
            },
            get_preair_info() {//获取精密空调的实时数据
                let that = this;
                let pre_arr1 = this.$data.preArr1;
                let pre_arr2 = this.$data.preArr2;
                let pre_arr3 = this.$data.preArr3;

                let real_msg = {"devicelist": this.$data.pre_arr};
                if (window.sessionStorage.getItem('username') == "zyl") {
                    $.ajax({
                        url: '../static/get_env_real_preair.json',
                        type: 'GET',
                        cache: false,
                        async: false,
                        dataType: 'text',
                        success: function (result) {
                            let data = eval("(" + result + ")");

                            $.each(data, function (i, value) {//i:deviceid,value:数据组
                                //数组为空/数组中不含有该值，则返回 -1
                                var index1 = $.inArray(parseInt(i), pre_arr1);
                                var index2 = $.inArray(parseInt(i), pre_arr2);
                                var index3 = $.inArray(parseInt(i), pre_arr3);

                                if (index1 >= 0) {//属于插件pluginid为721153的传感器
                                    let ii = 0;//用于告警数的计数
                                    let float_arr1 = show_preair_float_param1();
                                    let boole_arr1 = show_preair_boole_param1();

                                    $.each(float_arr1, function (n, val) {//n:key,val:元素属性
                                        if (typeof (value[val]) == "number") {
                                            if (val == 720901) {//空调运行模式
                                                let mode = "";
                                                if (value["720901"] == 0) {
                                                    mode = "单机";
                                                } else if (value["720901"] == 1) {
                                                    mode = "群控0";
                                                } else if (value["720901"] == 2) {
                                                    mode = "群控1";
                                                } else if (value["720901"] == 3) {
                                                    mode = "群控2";
                                                } else if (value["720901"] == 4) {
                                                    mode = "群控3";
                                                }
                                                data[i]["720901"] = mode;
                                            } else {
                                                data[i][val] = value[val].toFixed(2);
                                            }
                                        } else {
                                            data[i][val] = "error";
                                        }
                                    });

                                    $.each(boole_arr1, function (n, val) {//n:key,val:元素属性
                                        if (value[val] == true) {
                                            ii++;
                                        }
                                    });
                                    data[i]["numbersa"] = ii;

                                    //弹框打开,刷新数据
                                    if (that.$data.switch_status == 1) {
                                        that.fresh_data(721153, data[that.$data.switch_deviceid]);
                                    }
                                }

                                if (index2 >= 0) {//属于插件pluginid为721154的传感器
                                    let ii = 0;//用于告警数的计数
                                    let float_arr2 = show_preair_float_param2();
                                    let boole_arr2 = show_preair_boole_param2();

                                    $.each(float_arr2, function (n, val) {//n:key,val:元素属性
                                        if (typeof (value[val]) == "number") {
                                            data[i][val] = value[val].toFixed(2);
                                        } else {
                                            data[i][val] = "error";
                                        }
                                    });

                                    $.each(boole_arr2, function (n, val) {//n:key,val:元素属性
                                        if (value[val] == true) {
                                            ii++;
                                        }
                                    });
                                    data[i]["numbersa"] = ii;
                                    //弹框打开,刷新数据
                                    if (that.$data.switch_status == 1) {
                                        that.fresh_data(721154, data[that.$data.switch_deviceid]);
                                    }
                                }

                                if (index3 >= 0) {
                                    let ii = 0;//用于告警数的计数
                                    let float_arr2 = show_preair_float_param3();
                                    let boole_arr2 = show_preair_boole_param3();

                                    $.each(float_arr2, function (n, val) {//n:key,val:元素属性
                                        if (typeof (value[val]) == "number") {
                                            data[i][val] = value[val].toFixed(2);
                                        } else {
                                            data[i][val] = "error";
                                        }
                                    });

                                    $.each(boole_arr2, function (n, val) {//n:key,val:元素属性
                                        if (value[val] == true) {
                                            ii++;
                                        }
                                    });
                                    data[i]["numbersa"] = ii;
                                    //弹框打开,刷新数据
                                    if (that.$data.switch_status == 1) {
                                        that.fresh_data(721409, data[that.$data.switch_deviceid]);
                                    }
                                }
                            });

                            that.$data.preAlarm = data;
                        },
                        error: function (realdata) {
                        }
                    });
                } else {
                    $.ajax({
                        url: 'cgi-bin/JHMonitoring.cgi',
                        type: 'post',
                        cache: false,
                        async: false,
                        data: JSON.stringify(real_msg),
                        success: function (result) {
                            let data = eval("(" + result + ")");

                            $.each(data, function (i, value) {//i:deviceid,value:数据组
                                //数组为空/数组中不含有该值，则返回 -1
                                var index1 = $.inArray(parseInt(i), pre_arr1);
                                var index2 = $.inArray(parseInt(i), pre_arr2);
                                var index3 = $.inArray(parseInt(i), pre_arr3);

                                if (index1 >= 0) {//属于插件pluginid为721153的传感器
                                    let ii = 0;//用于告警数的计数
                                    let float_arr1 = show_preair_float_param1();
                                    let boole_arr1 = show_preair_boole_param1();

                                    $.each(float_arr1, function (n, val) {//n:key,val:元素属性
                                        if (typeof (value[val]) == "number") {
                                            if (val == 720901) {//空调运行模式
                                                let mode = "";
                                                if (value["720901"] == 0) {
                                                    mode = "单机";
                                                } else if (value["720901"] == 1) {
                                                    mode = "群控0";
                                                } else if (value["720901"] == 2) {
                                                    mode = "群控1";
                                                } else if (value["720901"] == 3) {
                                                    mode = "群控2";
                                                } else if (value["720901"] == 4) {
                                                    mode = "群控3";
                                                }
                                                data[i]["720901"] = mode;
                                            } else {
                                                data[i][val] = value[val].toFixed(2);
                                            }
                                        } else {
                                            data[i][val] = "error";
                                        }
                                    });

                                    $.each(boole_arr1, function (n, val) {//n:key,val:元素属性
                                        if (value[val] == true) {
                                            ii++;
                                        }
                                    });
                                    data[i]["numbersa"] = ii;

                                    //弹框打开,刷新数据
                                    if (that.$data.switch_status == 1) {
                                        that.fresh_data(721153, data[that.$data.switch_deviceid]);
                                    }
                                }

                                if (index2 >= 0) {//属于插件pluginid为721154的传感器
                                    let ii = 0;//用于告警数的计数
                                    let float_arr2 = show_preair_float_param2();
                                    let boole_arr2 = show_preair_boole_param2();

                                    $.each(float_arr2, function (n, val) {//n:key,val:元素属性
                                        if (typeof (value[val]) == "number") {
                                            data[i][val] = value[val].toFixed(2);
                                        } else {
                                            data[i][val] = "error";
                                        }
                                    });

                                    $.each(boole_arr2, function (n, val) {//n:key,val:元素属性
                                        if (value[val] == true) {
                                            ii++;
                                        }
                                    });
                                    data[i]["numbersa"] = ii;
                                    //弹框打开,刷新数据
                                    if (that.$data.switch_status == 1) {
                                        that.fresh_data(721154, data[that.$data.switch_deviceid]);
                                    }
                                }

                                if (index3 >= 0) {
                                    let ii = 0;//用于告警数的计数
                                    let float_arr2 = show_preair_float_param3();
                                    let boole_arr2 = show_preair_boole_param3();

                                    $.each(float_arr2, function (n, val) {//n:key,val:元素属性
                                        if (typeof (value[val]) == "number") {
                                            data[i][val] = value[val].toFixed(2);
                                        } else {
                                            data[i][val] = "error";
                                        }
                                    });

                                    $.each(boole_arr2, function (n, val) {//n:key,val:元素属性
                                        if (value[val] == true) {
                                            ii++;
                                        }
                                    });
                                    data[i]["numbersa"] = ii;
                                    //弹框打开,刷新数据
                                    if (that.$data.switch_status == 1) {
                                        that.fresh_data(721409, data[that.$data.switch_deviceid]);
                                    }
                                }
                            });

                            that.$data.preAlarm = data;
                        },
                        error: function (realdata) {
                        }
                    })

                }
            },
            get_smoke_info() {
                let that = this;
                let ii = 0;//用于烟感传感器的计数赋值
                let real_msg = {"devicelist": this.$data.smoke_arr};

                if (window.sessionStorage.getItem('username') == "zyl") {
                    $.ajax({
                        url: '../static/get_env_real_smokedata.json',
                        type: 'GET',
                        cache: false,
                        async: false,
                        dataType: 'text',
                        success: function (realdata) {
                            let data = eval("(" + realdata + ")");
                            $.each(data, function (i, value) {
                                if (JSON.stringify(data[i]) == "{}") {
                                    that.$data.smokeList[ii]["isActive"] = false;
                                    that.$data.smokeList[ii]["isnull"] = true;
                                    that.$data.smokeList[ii]["brief"] = "采集超时";
                                    ii++;
                                } else {
                                    if (data[i]["262145"] == 1) {//告警
                                        that.$data.smokeList[ii]["isActive"] = true;
                                    } else {//不告警
                                        that.$data.smokeList[ii]["isActive"] = false;
                                    }
                                    that.$data.smokeList[ii]["isnull"] = false;
                                    that.$data.smokeList[ii]["brief"] = "";
                                    ii++;
                                }
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                } else {
                    $.ajax({
                        url: 'cgi-bin/JHMonitoring.cgi',
                        type: 'post',
                        cache: false,
                        async: false,
                        data: JSON.stringify(real_msg),
                        success: function (realdata) {
                            let data = eval("(" + realdata + ")");
                            $.each(data, function (i, value) {
                                if (JSON.stringify(data[i]) == "{}") {
                                    that.$data.smokeList[ii]["isActive"] = false;
                                    that.$data.smokeList[ii]["isnull"] = true;
                                    that.$data.smokeList[ii]["brief"] = "采集超时";
                                    ii++;
                                } else {
                                    if (data[i]["262145"] == 1) {//告警
                                        that.$data.smokeList[ii]["isActive"] = true;
                                    } else {//不告警
                                        that.$data.smokeList[ii]["isActive"] = false;
                                    }
                                    that.$data.smokeList[ii]["isnull"] = false;
                                    that.$data.smokeList[ii]["brief"] = "";
                                    ii++;
                                }
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                }
            },
            get_door_info() {
                let that = this;
                let ii = 0;//用于门磁传感器的计数赋值
                let real_msg = {"devicelist": this.$data.door_arr};
                if (window.sessionStorage.getItem('username') == "zyl") {
                    $.ajax({
                        url: '../static/get_env_real_doordata.json',
                        type: 'GET',
                        cache: false,
                        async: false,
                        dataType: 'text',
                        success: function (realdata) {
                            let data = eval("(" + realdata + ")");
                            $.each(data, function (i, value) {
                                if (JSON.stringify(data[i]["458753"]) == undefined) {
                                    that.$data.doorList[ii]["isActive"] = false;
                                    that.$data.doorList[ii]["isnull"] = true;
                                    //that.$data.doorList[ii]["brief"] = "采集超时";
                                    ii++;
                                } else {
                                    if (data[i]["458753"] == 1) {//告警
                                        that.$data.doorList[ii]["isActive"] = true;
                                    } else {//不告警
                                        that.$data.doorList[ii]["isActive"] = false;
                                    }
                                    that.$data.doorList[ii]["isnull"] = false;
                                    //that.$data.doorList[ii]["brief"] = "";
                                    ii++;
                                }
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                } else {
                    $.ajax({
                        url: 'cgi-bin/JHMonitoring.cgi',
                        type: 'post',
                        cache: false,
                        async: false,
                        data: JSON.stringify(real_msg),
                        success: function (realdata) {
                            let data = eval("(" + realdata + ")");
                            $.each(data, function (i, value) {
                                if (JSON.stringify(data[i]["458753"]) == undefined) {
                                    that.$data.doorList[ii]["isActive"] = false;
                                    that.$data.doorList[ii]["isnull"] = true;
                                    //that.$data.doorList[ii]["brief"] = "采集超时";
                                    ii++;
                                } else {
                                    if (data[i]["458753"] == 1) {//告警
                                        that.$data.doorList[ii]["isActive"] = true;
                                    } else {//不告警
                                        that.$data.doorList[ii]["isActive"] = false;
                                    }
                                    that.$data.doorList[ii]["isnull"] = false;
                                    //that.$data.doorList[ii]["brief"] = "";
                                    ii++;
                                }
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                }
            },
            get_infrared_info() {
                let that = this;
                let ii = 0;//用于红外传感器的计数赋值
                let real_msg = {"devicelist": this.$data.infrared_arr};
                if (window.sessionStorage.getItem('username') == "zyl") {
                    $.ajax({
                        url: '../static/get_env_real_infrareddata.json',
                        type: 'GET',
                        cache: false,
                        async: false,
                        dataType: 'text',
                        success: function (realdata) {
                            let data = eval("(" + realdata + ")");
                            $.each(data, function (i, value) {
                                if (JSON.stringify(data[i]["196609"]) == undefined) {
                                    that.$data.infraredList[ii]["isActive"] = false;
                                    that.$data.infraredList[ii]["isnull"] = true;
                                    //that.$data.infraredList[ii]["brief"] = "采集超时";
                                    ii++;
                                } else {
                                    if (data[i]["196609"] == 1) {//告警
                                        that.$data.infraredList[ii]["isActive"] = true;
                                    } else {//不告警
                                        that.$data.infraredList[ii]["isActive"] = false;
                                    }
                                    that.$data.infraredList[ii]["isnull"] = false;
                                    //that.$data.infraredList[ii]["brief"] = "";
                                    ii++;
                                }
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                } else {
                    $.ajax({
                        url: 'cgi-bin/JHMonitoring.cgi',
                        type: 'post',
                        cache: false,
                        async: false,
                        data: JSON.stringify(real_msg),
                        success: function (realdata) {
                            let data = eval("(" + realdata + ")");
                            $.each(data, function (i, value) {
                                if (JSON.stringify(data[i]["196609"]) == undefined) {
                                    that.$data.infraredList[ii]["isActive"] = false;
                                    that.$data.infraredList[ii]["isnull"] = true;
                                    //that.$data.infraredList[ii]["brief"] = "采集超时";
                                    ii++;
                                } else {
                                    if (data[i]["196609"] == 1) {//告警
                                        that.$data.infraredList[ii]["isActive"] = true;
                                    } else {//不告警
                                        that.$data.infraredList[ii]["isActive"] = false;
                                    }
                                    that.$data.infraredList[ii]["isnull"] = false;
                                    //that.$data.infraredList[ii]["brief"] = "";
                                    ii++;
                                }
                            })
                        },
                        error: function (realdata) {
                        }
                    })
                }
            }

        },
        mounted() {
            this.check_pwd();
            this.get_info();
            setTimeout(this.moves, 500);
        },
        beforeCreate() {//用于设置下行设备时清除定时器
            window.hum_interval = "";
            window.water_interval = "";
            window.preair_interval = "";
            window.smoke_interval = "";
            window.door_interval = "";
            window.infrared_interval = "";
        },
        created() {
        },
        watch: {
            hum_arr() {
                if (this.$data.hum_arr.length != 0) {
                    hum_interval = setInterval(this.get_hum_info, 2000);
                    setTimeout(hum_interval, 2000)
                }
            },
            water_arr: function () {
                if (this.$data.water_arr.length != 0) {
                    water_interval = setInterval(this.get_water_info, 2000)
                    setTimeout(water_interval, 2000)
                }
            },
            pre_arr: function () {
                if (this.$data.pre_arr.length != 0) {
                    preair_interval = setInterval(this.get_preair_info, 2000);
                    setTimeout(preair_interval, 2000)
                }
            },
            smoke_arr: function () {
                if (this.$data.smoke_arr.length != 0) {
                    smoke_interval = setInterval(this.get_smoke_info, 2000);
                    setTimeout(smoke_interval, 2000);
                }
            },
            door_arr: function () {
                if (this.$data.door_arr.length != 0) {
                    door_interval = setInterval(this.get_door_info, 2000);
                    setTimeout(door_interval, 2000);
                }
            },
            infrared_arr: function () {
                if (this.$data.infrared_arr.length != 0) {
                    infrared_interval = setInterval(this.get_infrared_info, 2000);
                    setTimeout(infrared_interval, 2000);
                }
            }
        },
        beforeDestroy() {//页面关闭前清掉计时器
            clearInterval(hum_interval);
            clearInterval(water_interval);
            clearInterval(preair_interval);
            clearInterval(smoke_interval);
            clearInterval(door_interval);
            clearInterval(infrared_interval);
        }
    }
</script>
<style>
    .environment {
        width: 825px;
        height: 1017px;
        margin: auto;
        margin-top: 5%;
        background: url(../../assets/pingyu.jpg) center no-repeat;
        position: relative;
        min-width: 800px;
    }

    /*.water-main{
    width: 226px;
    height: 133px;
    position: absolute;
    left:375px;
    top:62px;
  }*/
    /*.water-main{
    width: 420px;
    height: 110px;
    position: absolute;
    left:375px;
    top:62px;
    left: 265px;
    top: 230px;
  }*/
    /*.water-main img{
    width:420px;
    height: 110px;
  }*/
    .air_water {
        position: absolute;
        /*left:208px;
     top:192px;*/
        left: 155px;
        top: 196px;
    }

    .preair_water {
        position: absolute;
        left: 294px;
        top: 485px;
    }

    .temperature {
        width: 98%;
        height: 100%;
        margin-top: -1.5%;
        position: relative;
    }

    .buttons-box {
        width: 100px;
        height: 40px;
        position: fixed;
        right: 50px;
        top: 100px;
        text-align: center;
        line-height: 40px;
    }

    .buttons-box .el-button {
        width: 80px;
        font-size: 15px;
        letter-spacing: 2px;
        height: 30px;
        line-height: 30px;
        padding: 0px;
    }

    .leach-box {
        width: 120px;
        position: absolute;
        height: auto;
        right: 100px;
        top: 100px;
        background: #fff;
        text-align: center;
        cursor: move;
        overflow: hidden;
    }

    .leach-box-header {
        background: #0080c0;
        color: #fff;
        height: 25px;
        line-height: 25px;
        letter-spacing: 1px;

        overflow: hidden; /*内容超出后隐藏*/
        text-overflow: ellipsis; /* 超出内容显示为省略号*/
        white-space: nowrap; /*文本不进行换行*/
    }

    .leach-box-active {
        background: red;
        font-weight: 600;
    }

    .leach-box-content {
        overflow: hidden;
        padding-top: 8px;
        overflow: hidden;
        padding-bottom: 8px;
    }

    .leach-box-content .el-select {
        width: 60px;
    }

    .el-popper[x-placement^=bottom] .popper__arrow {
        display: none;
    }

    .leach-box-title {
        float: left;
        width: 60px;
        height: 40px;
        line-height: 40px;
    }

    .leach-box .leach-box-mian {
        width: 60px;
        float: left;
        height: 40px;
        line-height: 40px;
    }

    .temperature ul {
        width: 100%;
        height: 100%;
    }

    .temperature ul li {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 90px;
        height: 80px;
        background: #269AD5;
        cursor: move;
    }

    .temperature ul li h4 {
        text-align: center;
        height: 20px;
        font-size: 14px;
        line-height: 20px;
        color: #fff;
        background: #0080c0;
        overflow: hidden; /*内容超出后隐藏*/
        text-overflow: ellipsis; /* 超出内容显示为省略号*/
        white-space: nowrap; /*文本不进行换行*/
    }

    .temperature ul li p {
        width: auto;
        height: 20px;
        margin: auto;
        padding: 0px;
        overflow: hidden;
        margin-top: 6px;
        text-align: center;

    }

    .temperature ul li p i {
        display: block;
        float: left;
        width: 15px;
        height: 20px;
        margin: 0px 5px;
    }

    .tem {
        background: url(../../assets/wendu.png) center no-repeat;
    }

    .humidity {
        background: url(../../assets/shidu.png) center no-repeat;
    }

    .temperature ul li p span {
        display: block;
        float: left;
        color: #fff;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        width: 60px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .air {
        width: 180px;
        position: absolute;
        height: auto;
        left: 0px;
        top: 0px;
        background: #fff;
        text-align: center;
        cursor: move;
        overflow: hidden;
    }

    .air .air-header {
        width: 100%;
        height: 25px;
        line-height: 25px;
        background: #0080C0;
        color: #fff;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
    }

    .air .air-content ul {
        width: 100%;
        height: 100%;
        padding-bottom: 8px;
    }

    .air .air-content ul li {
        height: 30px;
        line-height: 30px;
        padding: 2px 0px;
    }

    .air-name {
        width: 50px;
        height: 100%;
        float: left;
        font-size: 12px;
        letter-spacing: 1px;
        margin-top: 3px;
    }

    .air-main {
        float: left;
        width: 130px;
        height: 30px;
        line-height: 30px;
        margin-top: 3px;
    }

    .air-main .el-select {
        width: 60px;
        float: left;
    }

    .air-main .el-button {
        float: left;
        margin-left: 5px;
    }

    .pre-air {
        width: 150px;
        background: #fff;
        height: auto;
        position: absolute;
        left: 0px;
        top: 0px;
        overflow: hidden;
        cursor: move;
    }

    .pre-air-header {
        width: 100%;
        height: 25px;
        background: #0080c0;
        line-height: 25px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .pre-air-content {
        width: 100%;
        height: auto;
        padding-bottom: 5px;
    }

    .pre-air-content ul li {
        width: 100%;
        font-size: 12px;
        letter-spacing: 1px;
        overflow: hidden;
        height: 25px;
        line-height: 25px;
    }

    .pre-air-name {
        width: 70px;
        text-align: right;
        height: 25px;
        line-height: 25px;
        float: left;
    }

    .pre-air-data {
        float: left;
        width: 50px;
        height: 25px;
        line-height: 25px;
        text-align: center;
    }

    .pre-active {
        font-weight: 600;
        width: 40px;
        color: red;
    }

    .pre-air-more {
        cursor: pointer;
    }

    .pre-air-more:hover {
        color: red;
    }

    .temperature ul .smokeWarp .fire {
        position: absolute;
        left: 50px;
        top: 60px;
        z-index: 6;
    }

    .temperature ul .smokeWarp .smoke-main {
        height: 37px;
        width: 40px;
        margin-left: 28px;
        margin-top: 10px;
        border: 5px solid transparent;
        border-radius: 50%;
    }

    .temperature ul .smokeWarp .smoke .active {
        border-color: red;
        box-shadow: 0px 0px 30px red;
    }

    .temperature ul .smokeWarp .smoke-name {
        width: 100px;
        height: 20px;
        text-align: center;
        letter-spacing: 2px;
        line-height: 20px;
        font-size: 14px;
        font-weight: 600;
        color: #0080C0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: #0080C0;
        color: #fff;
        border-radius: 4px;

        overflow: hidden; /*内容超出后隐藏*/
        text-overflow: ellipsis; /* 超出内容显示为省略号*/
        white-space: nowrap; /*文本不进行换行*/
    }

    .temperature ul .smokeWarp .el-badge {
        position: absolute;
        right: -30px;
        top: 30px;
    }

    .temperature ul .smokeWarp {
        background: none;
    }

    .temperature ul .infraredWarp {
        background: none;
    }

    .box {
        width: 48px;
        height: 48px;
        background: url("../../assets/hongwai.png") center no-repeat;
        border: 5px solid transparent;
        border-radius: 50%;
        margin-top: 10px;
        margin-left: 5px;
    }

    .box_active {
        box-shadow: 0px 0px 30px red;
        border-color: red;
        background: url("../../assets/hongwai1.png") center no-repeat;
    }

    .box-name {
        width: 70px;
        text-align: center;
        height: 25px;
        line-height: 25px;
        background: #0080C0;
        font-size: 14px;
        color: #fff;
        border-radius: 3px;
        overflow: hidden; /*内容超出后隐藏*/
        text-overflow: ellipsis; /* 超出内容显示为省略号*/
        white-space: nowrap; /*文本不进行换行*/
    }

    .box-content {
        width: 100%;
        background: #fff;
        text-align: center;
        height: 50px;
        line-height: 40px;
        padding: 0px;
    }

    .door {
        position: absolute;
        left: 0px;
        top: 0px;
        cursor: move;
        z-index: 1;
    }

    .door-box {
        width: 31px;
        height: 40px;
        margin: auto;
        position: relative;
        top: 5px;
        background: url("../../assets/colse.png") no-repeat;
    }

    .door_open {
        background: url("../../assets/open.png") no-repeat;
    }

    .el-badge {
        position: absolute;
        right: -60px;
        top: 30px;
    }

    .box_name_active {
        color: red;
        font-weight: 600;
    }
</style>
